<template>
  <view class="partner-container">
    <!-- 导航栏 -->
    <uni-nav-bar title="商家合作" left-icon="back" @click-left="goBack" fixed />

    <!-- 主要内容 -->
    <view class="content">
      <!-- 标题 -->
      <view class="header">
        <image class="logo" src="/static/logo.png" mode="aspectFit" />
        <text class="title">禧易宝诚邀您合作</text>
      </view>

      <!-- 合作选项 -->
      <view class="options">
        <!-- 成为我店商家 -->
        <view class="option-card orange-card" @click="becomeMerchant">
          <view class="card-icon orange-icon">
            <uni-icons type="shop" size="28" color="#ff6600" />
          </view>
          <view class="card-content">
            <text class="card-title">成为禧易宝商家</text>
          </view>
          <view class="card-arrow">
            <uni-icons type="right" size="20" color="#666" />
          </view>
        </view>

        <!-- 查询开店进度 -->
        <view class="option-card blue-card" @click="checkProgress">
          <view class="card-icon blue-icon">
            <uni-icons type="calendar" size="28" color="#1890ff" />
          </view>
          <view class="card-content">
            <text class="card-title">查询开店进度</text>
          </view>
          <view class="card-arrow">
            <uni-icons type="right" size="20" color="#666" />
          </view>
        </view>
        <view class="text-center color-#fac002" @click="goRegister"
          >去注册</view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
// 成为我店商家
const becomeMerchant = () => {
  if (uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/partner/applyMerchant",
    });
  } else {
    uni.showToast({
      title: "请先注册",
      icon: "none",
    });
  }
};
// 查询开店进度
const checkProgress = () => {
  uni.navigateTo({
    url: "/pages/login/partner/checkProgress",
  });
};
// 去注册
const goRegister = () => {
  uni.navigateTo({
    url: "/pages/login/register",
  });
};

// 生命周期
onMounted(() => {});
</script>

<style scoped lang="scss">
.partner-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.content {
  padding: 60rpx 40rpx;
}

// 头部
.header {
  text-align: center;
  margin-bottom: 80rpx;

  .logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
  }

  .title {
    display: block;
    font-size: 40rpx;
    font-weight: 600;
    color: #333;
  }
}

// 选项卡片
.options {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.option-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;

  &:active {
    transform: scale(0.98);
  }

  .card-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
  }

  .orange-icon {
    background: linear-gradient(135deg, #ffe8d8 0%, #ffd4b3 100%);
  }

  .blue-icon {
    background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
  }

  .card-content {
    flex: 1;

    .card-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .card-arrow {
    display: flex;
    align-items: center;
  }
}

.orange-card {
  .card-title {
    color: #ff6600;
  }
}

.blue-card {
  .card-title {
    color: #1890ff;
  }
}
</style>
